<template>
  <div class="app-container">
    <!-- 拖拉拽开关 -->
    <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
    <el-button v-if="draggable" @click="batchSave" type="text" style="margin-left: 10px; color: blue;">批量保存</el-button>
    <!-- 商品分类树形控件 -->
    <el-tree 
      :data="data" 
      :props="defaultProps" 
      @node-click="handleNodeClick"
      :expand-on-click-node="false"  
      :auto-expand-parent="true"   
      :show-checkbox="true"   
      node-key="catId"            
      :default-expanded-keys="[1]" 
    >
      <!-- 可选：自定义节点内容（如显示分类等级、商品数量） -->
    <template #default="{ node, data }">
      <div class="custom-tree-node-container" >
        <span class="custom-tree-node">
          <!-- 分类名称 -->
          <span>{{ data.name }}</span>
          <!-- 可选：显示分类等级和商品数量（后端返回字段） -->
        </span>
        <span style="margin-left: 10px;">
              <el-button v-if="node.childNodes.length>0" type="text" size="mini" @click="append(data)" style="color: green;"> 添加 </el-button>
              <el-button v-if="node.level" type="text" size="mini" @click="edit(data)"> 修改 </el-button>
              <el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="remove(node, data)" style="color: red;"> 删除 </el-button>
        </span>
      </div>
    </template>
    </el-tree>

    <!-- 添加/修改分类对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="categoryForm.name"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="计量单位">
          <el-input v-model="categoryForm.productUnit"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="商品数量">
          <el-input v-model="categoryForm.productCount"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="显示顺序">
          <el-input v-model="categoryForm.sort"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="categoryForm" label-width="80px">
      <el-form-item label="是否显示">
        <el-radio-group v-model="categoryForm.showStatus">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import { listWithTree, logicRemoveByIds, addCategory, updateCategory  } from "@/api/product/category";

export default {
  name: "Category",
  data() {
    return {
      data: [], // 树形数据（后端返回的rows列表）
      // 树形控件配置：匹配后端数据字段
      defaultProps: {
        children: "children", // 子节点列表的字段名（与后端一致）
        label: "name"         // 分类名称的字段名（后端是name，不是默认的label）
      },
      // 用于添加和修改的对话框相关数据
      dialogVisible: false,
      dialogTitle: "",
      categoryForm: {
        catId: null,
        name: "",
        parentCid: 0,
        catLevel: 1,
        productUnit: "",
        productCount: 0,
        showStatus: 1,
        sort: 0
      },
      // 用于拖拉拽产生的相关数据
      pCid: [],
      draggable: false,
      updateNodes: [], // 拖拉拽产生的需要修改的节点
      maxLevel: 0
    };
  },
  created() {
    this.list(); // 页面创建时加载分类数据
  },
  methods: {
    // 加载商品三级分类数据
    list() {
      listWithTree().then((response) => {
        // 后端返回的data是{rows: [...]}，需将rows赋值给树形控件的data
        let rawData = response.rows || [];
        // 递归过滤showStatus=0的节点
        this.data = this.filterTreeByShowStatus(rawData);
      });
    },
    // 递归过滤树形数据：移除showStatus=0的节点
    filterTreeByShowStatus(tree) {
      return tree
        .filter(node => node.showStatus === 1) // 只保留showStatus=1的节点
        .map(node => {
          // 对每个节点的children也进行递归过滤
          if (node.children && node.children.length > 0) {
            node.children = this.filterTreeByShowStatus(node.children);
          }
          return node;
        });
    },
    // 节点点击事件（点击分类节点触发）
    handleNodeClick(data) {
    },
    // 显示添加分类对话框
    append(data) {
      this.dialogTitle = "添加商品分类";
      this.categoryForm = {
        // 父分类ID为当前点击节点的ID
        parentCid: data.catId, 
        // 分类层级为父分类层级+1
        catLevel: data.catLevel + 1, 
        name: "",
        productUnit: "",
        productCount: 0,
        showStatus: 1,
        sort: 0
      };
      this.dialogVisible = true;
    },
    // 显示修改分类对话框
    edit(data) {
      this.dialogTitle = "修改商品分类";
      // 深拷贝数据，避免修改时影响原数据
      this.categoryForm = JSON.parse(JSON.stringify(data));
      this.dialogVisible = true;
    },
    // 提交添加或修改表单
    submitForm() {
      if (this.categoryForm.catId) {
        // 有catId，说明是修改操作
        updateCategory(this.categoryForm).then(response => {
          if (response.code === 200) {
            this.$message.success("修改成功！");
            this.dialogVisible = false;
            this.list(); // 重新加载数据
          } else {
            this.$message.error(response.msg || "修改失败，请重试");
          }
        }).catch(error => {
          console.error("修改请求失败：", error);
          this.$message.error("网络错误，修改失败");
        });
      } else {
        // 无catId，说明是添加操作
        addCategory(this.categoryForm).then(response => {
          if (response.code === 200) {
            this.$message.success("添加成功！");
            this.dialogVisible = false;
            this.list(); // 重新加载数据
          } else {
            this.$message.error(response.msg || "添加失败，请重试");
          }
        }).catch(error => {
          console.error("添加请求失败：", error);
          this.$message.error("网络错误，添加失败");
        });
      }
    },
    // 关闭对话框
    cancelForm() {
      this.dialogVisible = false;
    },
    // 删除商品分类
    remove(node, data){
      // 1. 显示确认对话框，防止误操作
      this.$confirm(
        `确定要删除分类"${data.name}"吗？删除后可能影响子分类和相关商品！`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
      .then(() => {
        // 2. 用户确认后，调用删除接口（注意：接口需要的是ID数组，即使单个ID也要用数组包裹）
        logicRemoveByIds([data.catId]) // 这里传入的是数组，与后端Long[]参数匹配
          .then(response => {
            // 3. 接口调用成功后的处理
            if (response.code === 200) { // 假设后端返回200表示成功
              this.$message.success("删除成功！");
              // 4. 重新加载分类列表，刷新页面数据
              this.list();
            } else {
              // 5. 接口返回失败信息（如存在子分类不允许删除）
              this.$message.error(response.msg || "删除失败，请重试");
            }
          })
          .catch(error => {
            // 6. 捕获请求异常（如网络错误）
            console.error("删除请求失败：", error);
            this.$message.error("网络错误，删除失败");
          });
      })
      .catch(() => {
        // 7. 用户取消删除时的提示（可选）
        this.$message.info("已取消删除");
      });
        }
    }
};
</script>

<style scoped>
</style>